<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <div th:include="common/head_info::head_infor"></div>
    <script type="text/javascript" th:src="@{../js/moment-with-locales.min.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{../css/bootstrap-datetimepicker.css}">
    <script type="text/javascript" th:src="@{../js/bootstrap-datetimepicker.js}"></script>
    <script type="text/javascript" th:src="@{../js/bootstrap-datetimepicker.zh-CN.js}"></script>
    <script type="text/javascript" th:src="@{../js/paging.js}"></script>
    <script type="text/javascript" th:src="@{../js/activityDown.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{../css/paging.css}">
    <link rel="stylesheet" type="text/css" th:href="@{../css/route.css}"/>
    <title>Title</title>
</head>
<body>
<div class="container center" style="margin-top: 20px;">
    <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
            <input type="text" name="routeName"  id="routeName" class="form-control" placeholder="活动名称">
            <select class="form-control "id="routeType" name="routeType">
                <option value="0">所有类型</option>
                <option value="0">省内活动</option>
                <option value="1">省外活动</option>
                <option value="2">国外活动</option>
            </select>
            <input type="text" class="form-control" id="datetimeStart" name="starttime" readonly>
            --
            <input type="text" class="form-control" id="datetimeEnd" name="endtime" readonly>
        </div>
        <button type="button" class="btn btn-default" onclick="getData(1,6)">查找</button>
    </form>
    <div class="panel panel-default" >
        <!-- Table -->
        <table class="table" >
            <thead>
            <tr>
                <th >id</th>
                <th >活动主图</th>
                <th >活动名</th>
                <th >活动类型</th>
                <th >状态</th>
                <th >更新时间</th>
                <th >操作</th>
            </tr>
            </thead>
            <tbody id="list">

            </tbody>
        </table>
        <!--编辑弹窗-->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">×</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
                    </div>
                    <div class="modal-body">
                        <form role="form">
                            <div class="form-group">
                                <label for="title">活动名</label>
                                <input type="text" class="form-control" id="routenames" placeholder="请输入活动名">
                            </div>
                            <div class="form-group">
                                <label for="title">活动标题</label>
                                <input type="text" class="form-control" id="title" placeholder="请输入标题">
                            </div>
                            <div class="form-group">
                                <label for="detail">路线介绍</label>
                                <textarea class="form-control" rows="3" id="detail"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="cost">花费详情</label>
                                <textarea class="form-control" rows="3" id="cost"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="prompt">提示</label>
                                <textarea class="form-control" rows="3" id="prompt"></textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="updataData()">修改</button>
                    </div>
                </div>
            </div>
        </div>
        <!--弹窗end-->
        <!--订单编辑弹窗-->
        <div class="modal fade" id="orderModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">×</span></button>
                        <h4 class="modal-title" id="orderModalLabel">订单编辑</h4>
                    </div>
                    <div class="modal-body">
                        <form role="form">
                            <div class="form-group">
                                <label for="title">活动天数</label>
                                <input type="text" class="form-control" id="date" placeholder="活动天数">
                            </div>
                            <div class="form-group">
                                <label for="title">成人价</label>
                                <input type="text" class="form-control" id="adultPrice" placeholder="成人价">
                            </div>
                            <div class="form-group">
                                <label for="title">儿童价（1.2m以下）</label>
                                <input type="text" class="form-control" id="childPrice" placeholder="儿童价">
                            </div>
                            <div class="form-group">
                                <label for="title">报名人数</label>
                                <input type="text" class="form-control" id="stock" placeholder="报名人数">
                            </div>
                            <div class="form-group">
                                <label for="title">集合地点</label>
                                <input type="text" class="form-control" id="collectionSite" placeholder="集合地点">
                            </div>
                            <div class="form-group">
                                <label for="title">咨询电话</label>
                                <input type="text" class="form-control" id="tel" placeholder="咨询电话">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="updataOrderData()">修改</button>
                    </div>
                </div>
            </div>
        </div>
        <!--弹窗end-->
        <!--产品主图弹窗-->
        <div class="modal fade" id="imgModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">×</span></button>
                        <h4 class="modal-title" id="imgModalLabel">主图修改</h4>
                    </div>
                    <div class="modal-body">
                        <form role="form">
                            <div class="form-group">
                                <label for="file">产品主图</label>
                                <input type="file" id="file">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="updataDataImage()">修改</button>
                    </div>
                </div>
            </div>
        </div>
        <!--弹窗end-->
    </div>
    <div id="pageing2"></div>
</div>
<script>
    //初始化弹窗
    var recipient="";
    $('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // 触发事件的按钮
        recipient = button.data('whatever') // 解析出data-whatever内容
        var modal = $(this);
        $.ajax({
            url:"/activity/detail",
            type: "POST",
            dataType: "json",
            data:{id:recipient},
            success:function (json) {
                $('#routenames').val(json.data.routeName);
                $('#title').val(json.data.title);
                $('#detail').val(json.data.detail);
                $('#cost').val(json.data.cost);
                $('#prompt').val(json.data.prompt);
            }
        })
        modal.find('.modal-title').text('活动编辑')
    });
    //初始化订单编辑弹窗
    $('#orderModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // 触发事件的按钮
        recipient = button.data('whatever') // 解析出data-whatever内容
        var modal = $(this);
        $.ajax({
            url:"/activity/detail",
            type: "POST",
            dataType: "json",
            data:{id:recipient},
            success:function (json) {
                $('#date').val(json.data.date);
                $('#adultPrice').val(json.data.adultPrice);
                $('#childPrice').val(json.data.childPrice);
                $('#stock').val(json.data.stock);
                $('#collectionSite').val(json.data.collectionSite);
                $('#tel').val(json.data.tel);
            }
        })
        modal.find('.modal-title').text('订单编辑')
    });
    //初始化主图弹窗
    $('#imgModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // 触发事件的按钮
        recipient = button.data('whatever') // 解析出data-whatever内容
        var modal = $(this);
        modal.find('.modal-title').text('修改主图')
    });
    //日期插件初始化
    $('#datetimeStart').datetimepicker({
        language:  'zh-CN',
        format:'yyyy-mm-dd',
        weekStart: 1, /*以星期一为一星期开始*/
        todayBtn:  1,
        autoclose: 1,
        minView:2, /*精确到天*/
        pickerPosition: "bottom-left"
    }).on("changeDate",function(ev){  //值改变事件
        //选择的日期不能大于第二个日期控件的日期
        if(ev.date){
            $("#datetimeEnd").datetimepicker('setStartDate', new Date(ev.date.valueOf()));
        }else{
            $("#datetimeEnd").datetimepicker('setStartDate',null);
        }
    });
    $('#datetimeEnd').datetimepicker({
        language:  'zh-CN',
        format:'yyyy-mm-dd',
        weekStart: 1, /*以星期一为一星期开始*/
        todayBtn:  1,
        autoclose: 1,
        minView:2, /*精确到天*/
        pickerPosition: "bottom-left"
    }).on("changeDate",function(ev){
        /*选择的日期不能小于第一个日期控件的日期*/
        if(ev.date){
            $("#datetimeStart").datetimepicker('setEndDate', new Date(ev.date.valueOf()));
        }else{
            $("#datetimeStart").datetimepicker('setEndDate',new Date());
        }
    });

</script>
</body>
</html>